<template>
  <div class="convert-view">
    <h2>视频格式转换</h2>
    <div class="card">
      <div class="upload-area" @click="selectFile">
        <p v-if="!inputFile">点击选择视频文件</p>
        <p v-else>{{ inputFile }}</p>
      </div>

      <div v-if="inputFile" class="options">
        <div class="option-group">
          <label>输出格式</label>
          <select v-model="format">
            <option value="mp4">MP4</option>
            <option value="avi">AVI</option>
            <option value="mov">MOV</option>
            <option value="mkv">MKV</option>
            <option value="webm">WebM</option>
          </select>
        </div>

        <div class="option-group">
          <label>视频编码</label>
          <select v-model="videoCodec">
            <option value="libx264">H.264</option>
            <option value="libx265">H.265</option>
            <option value="libvpx-vp9">VP9</option>
          </select>
        </div>

        <div class="option-group">
          <label>音频编码</label>
          <select v-model="audioCodec">
            <option value="aac">AAC</option>
            <option value="mp3">MP3</option>
            <option value="opus">Opus</option>
          </select>
        </div>

        <button @click="convert" :disabled="processing" class="btn-primary">
          {{ processing ? '转换中...' : '开始转换' }}
        </button>

        <div v-if="progress > 0" class="progress-bar">
          <div class="progress-fill" :style="{ width: progress + '%' }"></div>
          <span class="progress-text">{{ progress.toFixed(1) }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTaskStore } from '../stores/task';

const taskStore = useTaskStore();

const inputFile = ref('');
const format = ref('mp4');
const videoCodec = ref('libx264');
const audioCodec = ref('aac');
const processing = ref(false);
const progress = ref(0);

const selectFile = async () => {
  const result = await window.electronAPI.dialog.openFile({
    filters: [{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv', 'webm'] }],
  });

  if (!result.canceled && result.filePaths[0]) {
    inputFile.value = result.filePaths[0];
  }
};

const convert = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: `converted.${format.value}`,
    filters: [{ name: 'Video', extensions: [format.value] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;
  progress.value = 0;

  const unsubscribe = window.electronAPI.video.onProgress((data) => {
    if (data.percent) progress.value = data.percent;
  });

  try {
    await window.electronAPI.video.convert({
      input: inputFile.value,
      output: result.filePath,
      format: format.value,
      videoCodec: videoCodec.value,
      audioCodec: audioCodec.value,
    });

    alert('转换完成！');
  } catch (error) {
    alert('转换失败：' + error);
  } finally {
    processing.value = false;
    unsubscribe();
  }
};
</script>

<style scoped>
@import '../styles/ConvertView.scss';
</style>
